<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>在图片中获取XY坐标点（pc端）</title>
</head>

<body style="margin: 0;">
    <canvas id="canvas">您的浏览器不支持canvas</canvas>
    <textarea id="input" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;"></textarea>
    <script>
        var canvas = document.getElementById("canvas");
        var pic = canvas.getContext("2d");
        var lineX = canvas.getContext("2d");
        var lineY = canvas.getContext("2d");
        var txt = canvas.getContext('2d');
        var img = new Image()
        img.src = "./static/img/jishuyang.jpg";
        img.onload = function () {
            var w = img.width;
            var h = img.height;
            console.log(w + "  " + h)
            canvas.width = w;
            canvas.height = h;
            canvas.addEventListener('mousemove', function (e) {
                var x = e.pageX;
                var y = e.pageY;
                canvas.width = canvas.width
                pic.drawImage(img, 0, 0);

                lineX.lineWidth = 1; //设置线宽
                lineX.strokeStyle = 'red'; //设置线颜色
                lineX.beginPath(); //开始绘制路径
                lineX.moveTo(x, 0); //移动至起始点
                lineX.lineTo(x, h); //移动至终点
                lineX.closePath();//闭合路径
                lineX.stroke(); //绘制

                lineY.lineWidth = 1; //设置线宽
                lineY.strokeStyle = 'red'; //设置线颜色
                lineY.beginPath(); //开始绘制路径
                lineY.lineTo(0, y); //移动至起始点
                lineY.lineTo(w, y); //移动至终点
                lineY.closePath(); //闭合路径
                lineY.stroke(); //绘制

                txt.font="30px 宋体";
				txt.fillStyle = '#FF0000';
				txt.fillText(x + "," + y, x, y);
                
                document.getElementById("input").value =  x + "," + y ;
            }, false);
            canvas.addEventListener('click', function (e) {
                var x = e.pageX;
                var y = e.pageY;
				var input = document.getElementById("input");
				input.select(); // 选中文本
				document.execCommand("copy"); // 执行浏览器复制命令
				alert("复制成功,坐标为 "+ x + "," + y);
            }, false);
            pic.drawImage(img, 0, 0);
        }
    </script>
</body>

</html>